<script setup>
import NavigationComponent from "./LayoutNavigationComp.vue"
import LoginAndSignupComp from "@/components/LoginComponents/LoginAndSignupComp.vue";
import {useScroll} from "@vueuse/core";
import {ref, watch} from "vue";
const {y} = useScroll(window);
const fixedClass = ref("");
watch(y, (newValue, oldValue) => {
  if (newValue > 0) {
    if (newValue < oldValue) {
      fixedClass.value = "show up";
    } else {
      fixedClass.value = "show down";
    }
  } else {
    fixedClass.value = "";
  }
});
</script>

<template>
  <header class="header-wrapper" :class="fixedClass">
    <NavigationComponent :class="{ sub: y > 0 }"></NavigationComponent>
  </header>
</template>

<style scoped lang="scss">
@use"@/styles/color-var-prim" as prim;
.header-wrapper {
  position: fixed;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height:4.5rem;
  padding: 0 1rem;
  transition: all 0.2s ease-in-out 0s;
  z-index: 9;
  border-bottom: 4px solid prim.$color-primary-dark;
  background-color: prim.$color-primary-light;
}

.show {
  color: prim.$color-text-light;
  background-color: prim.$color-primary-dark;
}

.up {
  transform: translateY(0);
}

.down {
  transform: translateY(-100%);
}

.right {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;

  .item {
    padding: 0.625rem 0.5rem;

  }
}

@media (max-width: 991px) {
  .header-wrapper {
    padding: 0;
  }

}
</style>